import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { connect } from 'umi';
import ProTable from '@ant-design/pro-table';
import { Input } from 'antd';
import { offRecord } from '@/services/order';

const writeRecords = () => {
  const columns = [
    {
      title: '昵称/姓名',
      key: 'user_name',
      valueType: 'text',
      hideInTable: true,
      renderFormItem: (_, { fieldProps }) => {
        return <Input {...fieldProps} placeholder="请输入昵称/姓名" />;
      },
    },
    {
      title: '手机号',
      key: 'user_phone',
      valueType: 'text',
      hideInTable: true,
      renderFormItem: (_, { fieldProps }) => {
        return <Input {...fieldProps} placeholder="请输入手机号" />;
      },
    },
    {
      title: '订单编号',
      valueType: 'text',
      dataIndex: 'order_sn',
      key: 'order_sn',
      copyable: true,
    },
    {
      title: '买家信息',
      valueType: 'text',
      key: 'buyerInfo',
      hideInSearch: true,
      render: (_) => {
        const { nickname, phone } = _;
        return (
          <div>
            <div>用户名：{nickname}</div>
            <div>手机号：{phone}</div>
          </div>
        );
      },
    },
    {
      title: '下单门店',
      valueType: 'text',
      dataIndex: 'shop_title',
      key: 'shop_title',
      hideInSearch: true,
    },
    {
      title: '核销时间',
      valueType: 'text',
      dataIndex: 'completed_at',
      key: 'completed_at',
      hideInSearch: true,
    },
    {
      title: '核销内容',
      valueType: 'text',
      dataIndex: 'content',
      key: 'content',
      hideInSearch: true,
      ellipsis: true,
      width: '25%',
    },
    {
      title: '核销金额',
      valueType: 'text',
      key: 'price',
      hideInSearch: true,
      render: (_) => {
        const { money } = _;
        return <div>实付：￥{money}</div>;
      },
    },
    {
      title: '核销码',
      valueType: 'text',
      dataIndex: 'verification_code',
      key: 'verification_code',
    },
    {
      title: '核销员',
      valueType: 'text',
      dataIndex: 'operator',
      hideInSearch: true,
    },
    {
      title: '核销员姓名',
      key: 'operator_realname',
      valueType: 'text',
      hideInTable: true,
      renderFormItem: (_, { fieldProps }) => {
        return <Input {...fieldProps} placeholder="请输入核销员姓名" />;
      },
    },
    {
      title: '创建时间',
      key: 'created_at',
      valueType: 'dateRange',
      hideInTable: true,
      renderFormItem: (_, { defaultRender }) => {
        return defaultRender(_);
      },
      search: {
        transform(fields) {
          return {
            created_start_at: fields[0],
            created_end_at: fields[1],
          };
        },
      },
    },
  ];

  return (
    <PageContainer>
      <ProTable
        rowKey="order_id"
        columns={columns}
        request={async (params) => {
          const paramsD = { ...params, page: params.current };
          const { data } = await offRecord({ ...paramsD });
          return {
            data: data.list,
            total: data.meta.pagination.total,
          };
        }}
        search={{
          defaultCollapsed: false,
        }}
        pagination={{
          pageSize: 10,
        }}
      />
    </PageContainer>
  );
};

const mapStateToProps = (state) => {
  return state;
};

export default connect(mapStateToProps)(writeRecords);
